'use client';

import { useState, useEffect } from 'react';
import ProductList from '@/components/ProductList';
import ShoppingCart from '@/components/ShoppingCart';
import { CartProvider } from '@/contexts/CartContext';

export default function Home() {
  const [sessionId, setSessionId] = useState<string>('');

  useEffect(() => {
    const savedSessionId = localStorage.getItem('sessionId');
    if (savedSessionId) {
      setSessionId(savedSessionId);
    } else {
      const newSessionId = Math.random().toString(36).substring(2);
      setSessionId(newSessionId);
      localStorage.setItem('sessionId', newSessionId);
    }
  }, []);

  return (
    <CartProvider sessionId={sessionId}>
      <div className="min-h-screen bg-gray-50">
        <header className="bg-white shadow-sm border-b">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <h1 className="text-xl font-bold text-gray-900">Shopper</h1>
              <div className="flex items-center gap-6">
                <a 
                  href="/orders" 
                  className="text-gray-700 hover:text-blue-600 transition-colors"
                >
                  我的订单
                </a>
                <ShoppingCart sessionId={sessionId} />
              </div>
            </div>
          </div>
        </header>

        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <ProductList sessionId={sessionId} />
        </main>
      </div>
    </CartProvider>
  );
}
